let canvas = document.querySelector("#paint");
let ctx = canvas.getContext("2d");
// 修改线条粗细
let lineWidth = document.querySelector("#lineWidth").value;
document.querySelector("#lineWidth").addEventListener("change", function(e) {
    console.log(e.target.value);
    lineWidth = e.target.value;
  })
  // 修改线条颜色
document.querySelector("#lineColor").addEventListener("change", function(e) {
  console.log(e.target.value);
  ctx.strokeStyle = e.target.value;
  ctx.fillStyle = e.target.value;
})

let mouseDrag = false;
let mouseStatus = "draw";
let eracerControl = document.querySelector("#eraser-control");
canvas.addEventListener("mousedown", function(e) {
  mouseDrag = true;
  ctx.moveTo(e.clientX, e.clientY);
  console.log("mousedown");
})
canvas.addEventListener("mouseup", function(e) {
  mouseDrag = false;
  console.log("mouseup");
})
canvas.addEventListener("mousemove", function(e) {
  if (mouseDrag && mouseStatus === "draw") {
    ctx.globalCompositeOperation="source-over"; 
  } else if(mouseDrag && mouseStatus === "clear"){
    // ctx.clearRect(e.clientX, e.clientY,90, 90);
    ctx.globalCompositeOperation="destination-out"
  }
  if(mouseDrag) {
    ctx.lineWidth = lineWidth;
    ctx.lineJoin = "round";
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(e.clientX, e.clientY, lineWidth / 2, 0, Math.PI * 2);
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(e.clientX, e.clientY);
    }
  console.log(mouseStatus);
})


document.querySelector("#clearCanvas").addEventListener("click", clearCanvas)

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

document.querySelector("#saveImage").addEventListener("click", saveImageInfo)

function saveImageInfo() {
  var image = canvas.toDataURL("image/png");
  console.log(image);
  var w = window.open('about:blank', 'image from canvas');
  w.document.write("<img src='" + image + "' alt='from canvas'/>");
}
document.querySelector("#eraser").addEventListener("click", function() {
  mouseStatus = "clear";
})
document.querySelector("#paint").addEventListener("click", function() {
  mouseStatus = "draw";
})

function earcer() {

}


window.onresize = resize;

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}


function init() {
  resize();
}

init();
